<!--
 * @Description: 
 * @Date: 2023-02-27 16:33:54
 * @LastEditors: czp
 * @LastEditTime: 2023-04-20 16:56:50
-->
<template>
	<div class="preview-video" v-show="showPreview">
		<div class="p-v-header">
			<span>{{ video.title }}</span>
			<IEpClose @click="close" />
		</div>
		<video ref="vRef" :src="video.src" controls></video>
	</div>
</template>
<script setup lang="ts" name="PreviewVideo">
import { userSubmitWatchVideo } from "@/service/modules/user";
import { PVideo } from "../interface";
import { useBaseStore } from "@/store/base";

defineProps<{ video: PVideo }>();
const showPreview = ref(false);
const vRef = ref();
const { token } = useBaseStore();
/**
 * 播放
 */
const play = () => {
	showPreview.value = true;
	nextTick(async () => {
		vRef.value.play();
		if (token) {
			await userSubmitWatchVideo({ videoId: 0 });
		}
	});
};

/**
 * 关闭
 */
const close = () => {
	vRef.value.pause();
	showPreview.value = false;
};

defineExpose({ play });
</script>
<style lang="scss" scoped>
.preview-video {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 20px;
	color: #ffffff;
	background-color: rgb(0 0 0 / 40%);
	.p-v-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 1200px;
		margin-bottom: 10px;
	}
	video {
		width: 1200px;
		height: 675px;
		background-color: #000000;
	}
}

@media all and (max-width: 750px) {
	.p-v-header {
		width: 90% !important  ;
	}
	video {
		width: 90% !important;
		height: auto !important;
		background-color: #000000;
	}
}
</style>
